<template>
  <div class="articlePublish" v-loading="loading" element-loading-text="拼命加载中">
    <!-- 标题 -->
    <div class="title">
      <h3>写文章</h3>
      <!-- <div><img src="@/assets/close.svg" alt=""></div> -->
      <div @click="dialogVisible = true"><span class="titleSpan">×</span></div>
    </div>
    <!-- 弹框 -->
    <el-dialog title="title" :visible.sync="dialogVisible" width="25%">
      <!-- 删除文章 -->
      <div slot="title" class="header-title" style="display: flex;align-items: center;">
        <span class="title-name">
          <i class="el-icon-warning" style="color: red;margin-right:10px;font-size: 24px;"></i>
        </span>
        <span class="title-age"
          style="font-family: PingFangSC-Medium;font-size: 16px;color: rgba(0,0,0,0.90);font-weight: 500;">提示</span>
      </div>
      <span style="padding-left: 20px;">此操作将导致文章信息丢失，是否继续？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="unchanged">取消</el-button>
        <el-button type="primary" size="medium" @click="jump" style="background: #4F81FF;border: none;">确认</el-button>
      </span>
    </el-dialog>

    <!-- 内容 -->
    <div class="table-connect">
      <el-form label-width="80px" :model="form" :rules="rules" ref="form">
        <el-form-item label="文章标题" prop="title">
          <el-input placeholder="请输入标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="cate_name">
          <el-input placeholder="请输入分类名" v-model="form.cate_name"></el-input>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容" prop="content">
          <quill-Editor @change="$refs.form.validateField('content')" v-model="form.content"
            :options="editorOption"></quill-Editor>
        </el-form-item>
        <el-form-item label="文章封面" class="el-form-item-upload" prop="cover_img">
          <el-upload action="#" list-type="picture" :auto-upload="false" :on-change="fn" :show-file-list="false"
            v-model="form.cover_img">
            <div class="iBox">
              <el-button type="primary" size="medium" class="fmBox">选择封面</el-button>
              <!-- <i slot="default" class="el-icon-plus"><span>选择封面</span></i> -->
            </div>
            <div v-if="form.cover_img_url.url" class="uploadBox" v-loading="loadingImg" element-loading-text="拼命加载中">
              <img :src="form.cover_img_url.url" width="496px" height="252px">
            </div>
            <div v-else class="uploadBox">
              <span>点击上方 "选择封面"</span>
            </div>

          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="release">发布</el-button>
          <el-button type="info" size="medium" @click="draft"
            style="background: #EAECF5;border-radius: 3px;border: none;color: #0052D9;">存为草稿</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { ReleaseArticleAssort } from '@/api/user'
import store from '@/store'
export default {
  name: 'articlePublish',
  activated () {
    store.commit('user/NewSetToken', localStorage.getItem('token'))
    this.$emit('setIndexisSHow', true)
  },
  components: {
    quillEditor
  },
  data () {
    return {
      // 控制关闭页面弹框显示
      dialogVisible: false,
      editorOption: {
        placeholder: '这里可以填写内容......'
      },
      loading: '',
      loadingImg: false,
      form: {
        // 标题
        title: '',
        // 分类
        cate_name: '',
        // 文章id
        cate_id: '',
        // 内容
        content: '',
        // 状态
        state: '',
        // 封面
        cover_img: '',
        cover_img_url: ''
      },
      // 验证规则
      rules: {
        title: [
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,30}$/, message: '长度为 1 ~ 10位', trigger: ['blur', 'change'] },
          { required: true, message: '标题长度为 1 ~ 30 个字符', trigger: ['change', 'blur'] }
        ],
        cate_name: [
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/, message: '文章分类长度为 1 ~ 10位', trigger: ['blur', 'change'] },
          { required: true, message: '请输入文章分类长度为 1 ~ 10位', trigger: ['change', 'blur'] }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: ['change', 'blur'] }
        ],
        cover_img: [
          { required: true, message: '请选择封面,，只能是图片文件', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    // 将图片显示
    fn (file) {
      // console.log(file)
      // 截取时间戳后8位
      this.form.cate_id = new Date().getTime().toString().slice(-8)
      this.loadingImg = true
      this.form.cover_img_url = file
      this.loadingImg = false
      this.form.cover_img = file.raw
    },
    async add () {
      // validate校验   resetFields重置
      await this.$refs.form.validate()
      this.loading = true
      // await ReleaseArticleAssort(this.form)
      try {
        const res = await ReleaseArticleAssort(this.form)
        this.$message.success(res.data.message)
        // 重置表单
        await this.$refs.form.resetFields()
        // 移除富文本自定义校验结果
        await this.$refs.form.clearValidate('content')
        // 移除图片显示
        this.form.cover_img_url = ''
        this.loading = false
      } catch (error) {
        console.log(error)
        if (error.response.status === 500) {
          this.$message.error('封面文件过大请重新选择...')
        }
        this.loading = false
      }
    },
    // 发布文章
    async release () {
      this.form.state = '已发布'
      await this.add()
    },
    async draft () {
      this.form.state = '草稿'
      await this.add()
    },
    // 控制弹框的确定和取消
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    unchanged () {
      this.dialogVisible = false
      this.$router.push('publish')
    },
    async jump () {
      this.form = { title: '', cate_name: '', cate_id: '', content: '', state: '', cover_img: '', cover_img_url: '' }
      await this.$refs.form.resetFields()
      await this.$refs.form.resetFields('content')
      this.$router.push('tabulation')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.titleSpan {
  color: #86909b;
  font-size: 32px;
}

.titleSpan:hover {
  cursor: pointer;
  color: #5eadff;
}

/deep/ .ql-editor {
  min-height: 120px;
}

.table-connect {
  padding: 23px 30px;
  border-radius: 4px 4px 0px 0px;
  background: #fff;
}

.uploadBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 496px;
  height: 252px;
  background: #EEEEEE;
  background: #F5F6FA;
  border-radius: 0px 0px 2px 2px;

  span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.40);
    text-align: center;
    line-height: 22px;
    font-weight: 400;
    transition: all 0.3 linear;

  }

  img {
    border-radius: 0px 0px 2px 2px;
    transition: all 0.3 linear;

  }
}

/deep/ .el-upload {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #4F81FF;
  line-height: 22px;
  font-weight: 400;

  .iBox {
    margin-bottom: 16px;
    text-align: left;

    .fmBox {
      background: rgba(255, 255, 255, 0.90);
      border: 1px solid rgba(220, 220, 220, 1);
      border-radius: 3px;
      color: black;
    }
  }

  span {
    margin-left: 5px;
  }
}

/deep/ .el-dialog__body {
  padding: 20px 20px 0 20px;
}
</style>
